<script setup>
import { showToast } from '@/utils/showTost.js'
import { ref } from 'vue'
// 控制忘记密码dialog的显示与隐藏
const dialogVisible = ref(false)
// 控制修改密码dialog的显示与隐藏
const changePassword = ref(false)
// 导入接口
import { verifyAccountAndEmailApi, changePasswordInLogin } from '@/api/login'
import { ElMessage } from 'element-plus';
// 准备表单数据
const form = ref({
    account: '',
    email: '',
    password: '',
    newPassword: ''
})
// 显示
const showDialog = () => {
    dialogVisible.value = true
}

// 表单验证规则
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else if (value !== form.value.password) {
        callback(new Error("两次密码不一致"))
    } else {
        callback()
    }
}
const rules = ref({
    account: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 6, max: 12, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    email: [
        {
            required: true, message: '请输入邮箱', trigger: 'blur'
        }
    ],
    password: [
        {
            required: true, message: '请输入密码', trigger: 'blur'
        },
        { min: 6, max: 12, message: 'Length should be 3 to 5', trigger: 'blur' },

    ],
    newPassword: [
        {
            validator: validatePass2, trigger: 'blur'
        }
    ]
})

// 忘记密码
const forgetForm = ref(null)
// 修改密码
const forgetPassword = ref(null)
// 点击下一步
const forgetPasswordDialog = async () => {
    await forgetForm.value.validate()
    const res = await verifyAccountAndEmailApi(form.value)
    // console.log(res.data);
    if (res.data.status === 1) {
        return ElMessage({ type: 'error', message: '邮箱与账户不匹配' })
    }
    localStorage.setItem('id', res.data.id)
    ElMessage({ type: 'success', message: '请输入新密码' })
    // 验证框打开
    dialogVisible.value = false
    // 控制修改密码的显示与隐藏
    changePassword.value = true
}
// 确认修改密码
const resetPassword = async () => {
    const res = await changePasswordInLogin(localStorage.getItem('id'), form.value.newPassword)
    if (res.data.status === 0) {
        ElMessage({ type: 'success', message: '修改成功' })
    }
    form.value = {
        account: '',
        email: '',
        password: '',
        newPassword: ''
    }
    changePassword.value = false
}
defineExpose({
    showDialog
})


</script>

<template>
    <div>
        <!-- 忘记密码 -->
        <el-dialog v-model="dialogVisible" title="忘记密码" width="400" center>
            <el-form :model="form" label-position="top" :rules="rules" ref="forgetForm">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="form.account" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="forgetPasswordDialog">
                        下一步
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 修改密码 -->
        <el-dialog v-model="changePassword" title="修改密码" width="400" center>
            <el-form :model="form" label-position="top" :rules="rules" ref="forgetPassword">
                <el-form-item label="新密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入新密码" show-password />
                </el-form-item>
                <el-form-item label="确认新密码" prop="newPassword">
                    <el-input v-model="form.newPassword" placeholder="请再次输入新密码" show-password />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="changePassword = false">取消</el-button>
                    <el-button type="primary" @click="resetPassword">
                        确认修改
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang='scss' scoped></style>